<template>
	<view>
		<u-navbar :is-back="false" title="登录" :background="background"></u-navbar>
		<image class="logo" :src="imagePath+'glxcx/blogo.png'" mode=""></image>
		<view class="header">
			<view>
				欢迎使用
				<span>营销助手门店端！</span>
			</view>
			<view class="header-icon"></view>
		</view>
		<view class="form">
			<u-form :model="form" ref="uForm">
				<u-form-item class="form" label-width="150" left-icon="account" prop="userName">
					<u-input v-model="form.userName" placeholder="请输入用户名"/>
				</u-form-item>
				<u-form-item label-width="150" prop="password" left-icon="lock" class="form">
					<u-input v-model="form.password" placeholder="请输入密码"/>
				</u-form-item>
			</u-form>
			<u-button :custom-style="btnStyle" @click="submit">登 录</u-button>
		</view>
	</view>
</template>

<script>
	import {
		login
	} from '@/api/marketingB-helper.js';
	export default {
		data() {
			return {
				imagePath:this.$imagePath,
				background: {
					background: '#fff'
				},
				btnStyle: {
					width: ' 600rpx',
					height: ' 88rpx',
					background: '#177fff',
					borderRadius: '44rpx',
					fontSize: '32rpx',
					fontWeight: '700',
					textAlign: ' center',
					color: '#ffffff',
					marginTop: ' 100rpx'
				},
				form: {
					userName: '',
					password: ''
				},
				rules: {
					userName: [{
						required: true,
						message: '请输入用户名',
					}],
					password: [{
						required: true,
						message: '请输入密码',
					}]
				}
			};
		},
		onLoad() {
			if (this.$get('phone')) {
				this.$store.commit('loginStore', this.$get('userInfo'));
				this.$switchTab('/pages/workbench/workbench', {});
			}
		},
		methods: {
			onShareAppMessage: function(res) {
				return {
					path: 'pages/login/login'
				}
			},
			submit() {
				var that = this;
				that.$refs.uForm.validate(valid => {
					if (valid) {
						var data = {
							userName: that.form.userName,
							password: that.form.password
						};
						console.log(data);
						login(data).then(res => {
							if (res.code == 200) {
								this.$store.commit('loginStore', res.data);
								this.$put('phone', res.data.phonenumber);
								this.$switchTab('/pages/workbench/workbench');
							} else {
								this.$u.toast(res.msg);
							}

						});
					} else {
						console.log('验证失败');
					}
				});
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
	};
</script>

<style lang="less" scoped>
	.logo {
		width: 200rpx;
		height: 200rpx;
		border-radius: 50%;
		display: block;
		margin: 50rpx auto 0;
	}

	.header {
		width: 100%;
		padding: 50rpx 77rpx 0;
		font-size: 42rpx;
		font-weight: 700;
		color: #131313;

		span {
			color: #177fff;
		}

		.header-icon {
			width: 120rpx;
			height: 20rpx;
			background: #e8f2ff;
			border-radius: 10rpx;
			margin: 22rpx 0;
		}
	}

	.form {
		padding: 30rpx;
		box-sizing: border-box;

		.u-form-item--left {
			width: 120rpx;
			text-align: center;
		}
	}
</style>
